<script setup lang="ts">
import {ref} from 'vue'
import {useRoute, useRouter} from "vue-router";
import {getShareFileInfo} from "@/api/share";
import {getFileRemainingDays} from "@/utils/textUtils";
import {ElMessage} from "element-plus";
import {checkPassword} from "@/api/share";
import {useCommonStore} from "@/stores/common";
import loading from "@/components/loading/index.vue"
import SvgIcon from "@/components/svg-icon/index.vue";

let code = ref('')
const route = useRoute()
const router = useRouter()
let fileInfo = ref({})
let common = useCommonStore()
let showLoading = ref(true)

const shareId = route.params.id.split('.')[0]
getShareFileInfo(shareId).then((res) => {
  fileInfo.value = res.data
  showLoading.value = false
}).catch((res) => {
  showLoading.value = false
  isValid.value = false
  console.log(res)
})
const isValid = ref(true)

const getSharingToken = (isVerity?: any) => {
  checkPassword({
    shareId: shareId,
    password: code.value
  }).then((res: any) => {
    ElMessage.success('提取成功')
    common.shareFileToken[shareId] = res.data
    router.push({
      path: `/s/${route.params.id}`
    }).catch(((res) => {
      if (isVerity) {
        ElMessage.error('提取码错误')
      }
    }))
  })
}

getSharingToken()

const verityCode = () => {
  if (code.value) {
    getSharingToken(true)
  } else {
    ElMessage.error('请输入提取码')
  }
}
</script>

<template>

  <div v-if="showLoading" class="loading">
    <loading></loading>
  </div>

  <div v-show="!showLoading" class="verify">
    <div v-if="isValid" class="verify-box">
      <div class="header">
        <div class="avatar">
          <el-avatar :size="80" :src="fileInfo.avatar"/>
        </div>
        <div class="text">
          <div class="top">
            <h4 class="name">浪漫写尽歌谱</h4>
            <p>分享于{{ fileInfo.createTime }}</p>
            <p>{{ getFileRemainingDays(fileInfo.savingTime) }}内有效</p>
          </div>
          <div class="bottom">
            <p>分享文件(夹)：{{ fileInfo.fileName }}</p>
          </div>
        </div>
      </div>
      <div class="content">
        <div>
          <p>请输入提取码：</p>
        </div>
        <div style="display: flex; gap: 40px;margin-top: 20px">
          <el-input @keydown.enter="verityCode" v-model="code" style="width: 70%" clearable/>
          <el-button @click="verityCode" color="#597DFC" style="color: #fff">提取文件</el-button>
        </div>
      </div>


    </div>

    <div v-else class="valid">
      <svg-icon style="width: 400px;height: 400px" name="share_empty"/>
      <h3>分享链接已失效</h3>
    </div>
  </div>

</template>

<style scoped lang="scss">
.valid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  height: 100%;

  p {
    margin-top: 20px;
  }
}

.verify {

  .verify-box {
    margin: 150px auto;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 20px;
    width: 600px;
    height: 300px;

    .header {
      display: flex;
      background-color: #597DFC;
      width: 100%;
      height: 110px;
      padding: 15px;
      border-radius: 20px 20px 0 0;
      color: #fff;

      .text {
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        margin-top: 15px;
        gap: 15px;

        .top {
          display: flex;
          gap: 15px;


          .name {
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

      }
    }

    .content {
      display: flex;
      flex-direction: column;
      margin: 50px;
    }

  }
}
</style>